<template>
  <div class="mall-config">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="海报配置" name="1">
        <advert></advert>
      </el-tab-pane>
      <el-tab-pane label="商城配置" name="2">
        <iconConfig ref="iconConfigRef"></iconConfig>
      </el-tab-pane>
      <el-tab-pane name="3" disabled>
        <template #label>
          <div v-show="activeName === '2'">
            <el-button type="primary" @click="save">保存</el-button>
            <el-button type="primary" plain @click="cancel">取消</el-button>
          </div>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from "vue";
import advert from "./components/advert";
import iconConfig from "./components/iconConfig";

const activeName = ref("1");
const iconConfigRef = ref();

const save = () => {
  iconConfigRef.value.getFormData();
};
const cancel = () => {
  iconConfigRef.value.reset();
  iconConfigRef.value.getFormData();
};
</script>

<style lang="scss" scoped>
.mall-config {
  height: 100%;
  overflow-y: auto;
  background-color: white;
  border-radius: 10px 10px 0 0;
  :deep(.el-tabs__nav-scroll) {
    padding-left: 20px;
    border-radius: 10px 10px 0 0;
    .el-tabs__nav.is-top {
      position: relative;
      width: 100%;
    }
    .el-tabs__item {
      height: 66px;
      padding-top: 15px;
    }
    .el-tabs__item.is-top.is-disabled {
      position: absolute;
      right: 0;
      margin-right: 20px;
    }
  }
}
</style>
